<template>
	<view style="display: flex;flex-direction: column;height: 100vh;">
		<view style="background-color: #f2f2f2;">
			<view style="margin: 10px 20px;font-size: 24rpx;display: flex;justify-content: space-between;">
				<view>
					<text style="color: red;font-weight: bold;">温馨提示：</text>
					<text style="color: #aaa;"> 只能开取通过小程序下单并确认收货的发票</text>
				</view>
				<u-icon name="reload" @click="reload" size="50"></u-icon>
			</view>
			<u-cell-group>
				<u-cell-item :title="title" @click="lookUp"></u-cell-item>
			</u-cell-group>
			<view
				style="margin-top: 10px;background-color: #fff;display: flex;justify-content: space-between;border-bottom: #eee 1px solid;padding: 10px;">
				<u-section title="可开票订单" :right="false" line-color="red" font-size="28"
					style="margin-top:5px;"></u-section>
				<view style="color: red;text-align: right;margin-right: 10px;">
					<view @click="history" style="font-weight: bold;color:#00aa00 ;">
						开票历史
					</view>
				</view>
			</view>
		</view>
		<view style="overflow: scroll;flex: 1;">
			<!-- :refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="refresherrefresh" -->
			<scroll-view scroll-y @scrolltolower="reachBottom">
				<view class="page-box" style="min-height: 50vh;background-color: #f2f2f2;">
					<view v-for="(item,index) in list" :key="index"
						style="padding: 10px;display: flex;justify-content: space-between;border-bottom: #eee 1px solid;background-color: #fff;">
						<view style="display: flex;">
							<view style="display: flex;align-items: center;margin-right: 20rpx;">
								<evan-checkbox class="checkbox" v-model="item.isChecked"></evan-checkbox>
							</view>
							<view @click="ok(item)">
								<view>
									<u-icon name="shopping-cart" size="28"
										style="margin-right: 20rpx;"></u-icon>{{ item.code }}
								</view>
								<view style="margin-top: 10px;">
									<u-icon name="account" size="28" style="margin-right: 20rpx;"></u-icon>
									{{ item.basCus.name }}
								</view>
								<view style="color: #aaa;font-size: 24rpx;margin-top: 10px;">
									<u-icon name="calendar" size="28" style="margin-right: 20rpx;"></u-icon>
									{{ item.ddate }}
								</view>
							</view>
						</view>
						<view @click="ok(item)" style="display: flex;align-items: center; ">{{item.chdefine46}}元
						</view>
					</view>
					<view class="page-box" v-if="!list.length"
						style="min-height: 50vh;width: 100%;display: flex;align-items: center;justify-content: center;">
						<view>
							<u-empty text="暂无开票信息!" mode="list"></u-empty>
						</view>
					</view>
					<!-- <u-loadmore v-if="list.length" :status="loadStatus" bgColor="#f2f2f2"></u-loadmore> -->
				</view>

			</scroll-view>


		</view>

		<!-- 底部结算栏目 -->
		<view style="width: 100%;" v-if="list.length">
			<view style="background-color: #eee;color: #000;padding: 10rpx 0 10rpx 20rpx;font-size: 24rpx;">
				已经选择 <text style="font-weight: bold;color:red;">{{totalNum}}</text> 张订单，开票金额总计：<text
					style="font-weight: bold;color:red;">{{totalPrice}}</text> 元
			</view>
			<view class="tabbar">
				<view class="all">
					<evan-checkbox v-model="isAllChecked"></evan-checkbox>
					<text style="line-height: 30px;margin-left: 20rpx;">全选</text>
				</view>
				<!-- ({{totalNum}}) -->
				<view class="submitOrder" @tap="submitOrder">
					确认开票
				</view>
			</view>
		</view>



		<u-modal v-model="show" title="开票确认" :mask-close-able="true" :show-cancel-button="true" @confirm="confirm">
			<view v-if="fpData.ctype" style="padding: 10px;">
				<view style="font-size: 24rpx;margin-bottom: 10px;">
					<text style="color: #aaa;margin-right: 20rpx;">抬头类型:</text>
					<text>{{fpData.ctype == 1 ? '个人' : '单位'}}</text>
				</view>
				<view style="font-size: 24rpx;margin-bottom: 10px;">
					<text style="color: #aaa;margin-right: 20rpx;">发票抬头:</text>
					<text>{{fpData.cname}}</text>
					<!--企业 重庆轻企信息技术有限公司 91500105MA5YWQ0Q5G-->
				</view>
				<view v-if="fpData.ctype == 2" style="font-size: 24rpx;margin-bottom: 10px;">
					<text style="color: #aaa;margin-right: 20rpx;">开票税号:</text>
					<text>{{fpData.dutyNo}}</text>
				</view>
				<view style="font-size: 24rpx;margin-bottom: 10px;">
					<text style="color: #aaa;margin-right: 20rpx;">联系方式:</text>
					<text>{{fpData.contactInfo}}</text>
				</view>
				<view style="font-size: 24rpx;margin-bottom: 10px;">
					<text style="color: #aaa;margin-right: 20rpx;">开票金额:</text>
					<text>{{totalPrice}}元</text>
				</view>
				
				<view style="font-size: 24rpx;margin-bottom: 10px;">
					<text style="color: #aaa;margin-right: 20rpx;margin-bottom: 10rpx;">开票备注:</text>
					<textarea v-model="fpData.remarks" placeholder="请输入开票备注" type="text" placeholder-class="line" />
				</view>
				<view style="font-size: 24rpx;margin-bottom: 10px;">
					<text style="color: #aaa;margin-right: 20rpx;">开票附件:</text>
					<js-uploadfile v-model="fpData.dataMap" :biz-key="fpData.id" biz-type="cusFpApply_image"></js-uploadfile>
				</view>
				<view style="background-color: #eee;font-size: 24rpx;text-align: center;padding: 10px;color: red;">
					发票开具成功后不可撤销，请您仔细核对开票信息
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import util from '@/common/fire.js'
	export default {

		data() {
			return {
				value: 0,
				list: [],
				payMoney: 0,
				show: false,
				triggered: false,
				title: "请选择开票抬头信息",
				curCus: {},
				fpData: {},
				cusMoney: {
					flhxMoney: '0.00',
					cxhxMoney: '0.00'
				},
				flag: '',
				model: {},
				selectList: [],
				query: {
					pageNo: 1,
					pageSize: 10
				},
				loadStatus: 'loadmore',
			}
		},
		computed: {
			// 全选
			isAllChecked: {
				// list列表--->全选
				get() {
					// 列表中是否都选中了
					if (!this.list.length) {
						return false
					}
					return this.list.every(el => el.isChecked == true)
				},
				// 全选---->list列表
				set(val) {
					this.list.forEach(el => el.isChecked = val)
				}
			},
			// 总价
			totalPrice() {
				// 计算list列表中所有选中商品的价格
				var sum = 0
				this.list.forEach(el => {
					if (el.isChecked) {
						sum = Number(el.chdefine46) + sum
					}
				})

				return sum
			},

			// 件数
			totalNum() {
				// 计算list列表中所有选中商品的价格
				var num = 0
				this.list.forEach(el => {
					if (el.isChecked) {
						num++;
					}
				})

				return num
			},
		},
		onLoad(params) {
			this.loadList()
			this.$u.api.shop.defCusInfo({
				cusCode: this.vuex_basCus.code
			}).then(res => {
				if (res.result) {
					this.fpData = res.data
					let ctype = res.data.ctype == 1 ? '个人' : '单位'
					this.title = res.data.cname + '（' + ctype + '）'
				} else {
					this.title = `请选择开票抬头信息`
				}
			})

			uni.$on('lookUp', (e) => {
				this.fpData = e
				let ctype = e.ctype == 1 ? '个人' : '单位'
				this.title = e.cname + '（' + ctype + '）'
			})

		},
		methods: {
			async reload() {
				
				await this.$u.api.shop.defCusInfo({
					cusCode: this.vuex_basCus.code
				}).then(res => {
					if (res.result) {
						this.fpData = res.data
						let ctype = res.data.ctype == 1 ? '个人' : '单位'
						this.title = res.data.cname + '（' + ctype + '）'
					} else {
						this.title = `请选择开票抬头信息`
					}
				})
				
				this.query.pageNo = 1;
				this.query.cusCode = this.vuex_basCus.code
				this.$u.api.shop.kpListData(this.query).then(res => {
					if (res.result == 'false') {
						// uni.stopPullDownRefresh();
						uni.showToast({
							title: res.message,
							icon: 'none',
						});
					} else {
						if (res.list.length < 10 || res.list.length == 0) {
							this.loadStatus = "nomore";
						}
						var list = res.list.map(item => {
							item.isChecked = false
							item.chdefine46 = util.toFixed2(item.chdefine46)
							return item;
						});
						this.list = list;
						// uni.stopPullDownRefresh(); //停止刷新
						this.$u.toast('刷新成功！');
					}
				})

			},
			submitOrder() {
				if (!this.totalNum) {
					uni.showToast({
						title: '请先选择需开票订单！',
						icon: 'none',
					});
				} else if (this.title == '请选择开票抬头信息') {
					this.$u.toast('请先选择开票抬头信息！');
				} else {
					// this.fpData.remarks = ''
					this.show = true
				}
			},
			ok(item) {
				let query = {
					cusCode:this.vuex_basCus.code,
					// createBy:this.vuex_user.userCode,
					code:item.code,
					pageNo: 1,
					pageSize: 10
				}
				this.$u.api.shop.orderListData(query).then(resp => {
					uni.navigateTo({
						url: '/pages/btdm/index/user/orderListDetails',
						success: function(res) {
							// 通过eventChannel向被打开页面传送数据
							// 其中含有两个参数，第一个是接收的函数名，第二个则是需要携带的参数
							res.eventChannel.emit('acceptDataFromOpenerPage', resp.list[0])
						}
					})
				})
				
			},
			history() {
				uni.navigateTo({
					url: '/pages/btdm/index/user/invoice/history',
				})
			},
			lookUp() {
				uni.navigateTo({
					url: '/pages/btdm/index/user/invoice/lookUp',
				})
			},
			confirm() {
				let _that = this
				let arr = this.list.filter(item => {
					return item.isChecked
				})
				let newarr = arr.map(item => {
					return item.code
				})
				// console.log(this.fpData);
				let data = {
					selIds: newarr.join(','),
					kpInfo: {
						id: this.fpData.id
					},
					remarks: this.fpData.remarks,
					cusCode: this.vuex_basCus.code,
					dataMap:this.fpData.dataMap
				}
				console.log(data);
				this.$u.api.shop.saveBySel(data).then(res => {
					if (res.result == 'false') {
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false,
							success: function(res) {}
						});
					} else {
						this.show = false
						setTimeout(() => {
							_that.$u.toast(res.message);
						}, 500)
						this.query.pageNo = 1;
						this.loadList()
					}
				})
			},
			async refresherrefresh() {
				this.triggered = true
				this.query.pageNo = 1;
				await this.loadList()
				this.triggered = false
			},
			loadList(type) {
				this.query.cusCode = this.vuex_basCus.code
				// this.query.createBy=this.vuex_user.userCode
				this.$u.api.shop.kpListData(this.query).then(res => {

					if (res.result == 'false') {
						uni.showToast({
							title: res.message,
							icon: 'none',
						});
					} else {
						if (res.list.length < 10 || res.list.length == 0) {
							this.loadStatus = "nomore";
						}
						var list = res.list.map(item => {
							item.isChecked = false
							item.chdefine46 = util.toFixed2(item.chdefine46)
							return item;
						});
						if (type == "add") {
							for (var i = 0; i < list.length; i++) {
								this.list.push(list[i])
							}
						} else {
							this.list = list;
						}

					}
				})

			},
			reachBottom() {
				// 此tab为空数据
				this.loadStatus = "loading";
				setTimeout(() => {
					this.query.pageNo += 1;
					this.loadList("add");
				}, 100);
			},
		},


	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 98%;
		text-align: center;
		overflow: scroll;
	}


	.item-menu-image {
		width: 100px;
		height: 85px;
	}

	textarea {
		width: 100%;
		height: 200rpx;
		background-color: #f7f7f7;
		padding: 20rpx;
	}

	// 底部导航
	.tabbar {
		border-top: 1px solid #eee;
		width: 100%;
		padding: 0 30rpx;
		height: 120rpx;
		background-color: #ffffff;
		// position: fixed;
		// bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// border-radius: 8% 8%;

		.all {
			font-size: 32rpx;
			color: #3E3E3E;
			letter-spacing: 2.29rpx;
			display: flex;
		}

		.totalPrice {
			font-size: 32rpx;
			// color: #000000;
			letter-spacing: 2.29rpx;
			color: red;
			// margin-right: 10%;
		}

		.totalPrice1 {
			font-size: 40rpx;
			// color: #ff0000;
			// letter-spacing: 2.29rpx;
			color: red;
			// margin-bottom: 4px;
		}

		.totalNum {
			font-size: 32rpx;
			color: #0e348d;
			letter-spacing: 2.29rpx;
			color: red;
		}

		.submitOrder {
			width: 248rpx;
			height: 80rpx;
			background: #00aa00;
			border-radius: 14rpx;
			border-radius: 14rpx;
			font-size: 36rpx;
			color: #FFFFFF;
			letter-spacing: 2.57rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	/deep/.evan-checkbox__inner {
		width: 30px !important;
		height: 30px !important;
	}
</style>